<template>
<div :class="$style.container" class="a_search">
  <group :gutter="-1">
     <x-input v-model="value" :debounce="100" @on-change="change" placeholder="请输入搜索关键词">
       <div slot="label">
         <i :class="[$style.icon,'iconfont','icon-search']"></i>
       </div>
     </x-input>
  </group>
</div>
</template>

<script>
import { Group, XInput } from 'vux'
export default {
  data () {
    return {
      value: ''
    }
  },
  components: {
    Group,
    XInput
  },
  methods: {
    change () {
      this.$emit('keyWordChange', this.value)
    }
  }
}
</script>

<style lang='less' module>
.container {
  padding-top: 10px;
  .icon {
    margin-right: 10px;
    font-size:20px;
    color:#999;
  }
}

</style>

<style scoped>
  .a_search >>> .weui-cell {
    padding: 0px 10px;
  }
  .a_search >>> .weui-cells  {   
    margin: 10px!important;
    border-radius: 20px;
    border: 1px solid #e36049;
  }
  .a_search >>> .weui-cells  input {
    height:40px;
  }
</style>